<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="irstheme">

    <title></title>

    <!-- Icon fonts -->
    <link href="static/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/assets/css/themify-icons.css" rel="stylesheet">
    <link href="static/assets/css/flaticon.css" rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="static/assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Plugins for this template -->
    <link href="static/assets/css/animate.css" rel="stylesheet">
    <link href="static/assets/css/owl.carousel.css" rel="stylesheet">
    <link href="static/assets/css/owl.theme.css" rel="stylesheet">
    <link href="static/assets/css/slick.css" rel="stylesheet">
    <link href="static/assets/css/slick-theme.css" rel="stylesheet">
    <link href="static/assets/css/swiper.min.css" rel="stylesheet">
    <link href="static/assets/css/owl.transitions.css" rel="stylesheet">
    <link href="static/assets/css/odometer-theme-default.css" rel="stylesheet">
    <link href="static/assets/css/jquery.fancybox.css" rel="stylesheet">
    <link href="static/assets/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="static/assets/js/echarts.js"></script>

    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/assets/js/bootstrap.min.js"></script>

    <!-- Plugins for this template -->
    <script src="static/assets/js/jquery-plugin-collection.js"></script>

    <!-- Custom script for this template -->
    <script src="static/assets/js/script.js"></script>

    <!--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>-->
</head>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrapper">

        <!-- start preloader -->
        <div class="preloader">
            <div class="sk-folding-cube">
                <div class="sk-cube1 sk-cube"></div>
                <div class="sk-cube2 sk-cube"></div>
                <div class="sk-cube4 sk-cube"></div>
                <div class="sk-cube3 sk-cube"></div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="site-header header-style-2">
            <nav class="navigation navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="open-btn">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.html"><img src="static/assets/images/logo-2.png" alt></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse navbar-right navigation-holder">
                        <button class="close-navbar"><i class="ti-close"></i></button>
                        <ul class="nav navbar-nav">
                            <li><a href="/index">首页</a></li>
                            <li><a href="/project">项目统计</a></li>
                            <li><a href="/user">用户统计</a></li>
                            <li><a href="/sample">案例统计</a></li>
                            <li><a href="/list">排行榜</a></li>
                        </ul>
                    </div>
                    <!-- end of nav-collapse -->

                    <div class="separator"></div>
                </div>
                <!-- end of container -->
            </nav>
        </header>
        <!-- end of header -->


        <!-- start features-section-s3 -->
        <!-- 内容展示 -->

        <section class="features-section-s3 section-padding bg-1">
            <div class="container">
                <div id = "userbing" style="width:1000px;height:600px;left:5%"></div>
                <script type="text/javascript">
                    var dom = document.getElementById('userbing');
                    var myChart = echarts.init(dom);
                    var option;
                    option = {
                        title: {
                            text: '各等级用户数目统计'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '用户等级',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    {value: {{sumlist[0]}}, name: 'lv0'},
                                    {value: {{sumlist[1]}}, name: 'lv1'},
                                    {value: {{sumlist[2]}}, name: 'lv2'},
                                    {value: {{sumlist[3]}}, name: 'lv3'},
                                    {value: {{sumlist[4]}}, name: 'lv4'},
                                    {value: {{sumlist[5]}}, name: 'lv5'},
                                    {value: {{sumlist[6]}}, name: 'lv6'},
                                    {value: {{sumlist[7]}}, name: 'lv7'},
                                    {value: {{sumlist[8]}}, name: 'lv8'},
                                    {value: {{sumlist[9]}}, name: 'lv9'},
                                    {value: {{sumlist[10]}}, name: 'lv10'}
                                ]
                            }
                        ]
                    };
                    option && myChart.setOption(option);

                </script>
            </div>

             <div class="contaioner2">
                <div id="levelavg" style="width:1000px;height:600px;left:15%"></div>
                    <script type="text/javascript">
                        var dom = document.getElementById('levelavg');
                        var tsChart = echarts.init(dom);
                        var option;
                        var colors = ['#5470C6', '#91CC75'];
                        option = {
                            color: colors,
                            title: {
                            text: '各等级用户的项目数量统计'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            grid: {
                                right: '20%'
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['平均项目数', '平均案例数']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    data: ['lv0', 'lv1', 'lv2', 'lv3', 'lv4', 'lv5', 'lv6', 'lv7', 'lv8', 'lv9', 'lv10']
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '平均项目数',
                                    min: 0,
                                    max: 80,
                                    position: 'left',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[0]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value} 个'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '平均案例数',
                                    min: 0,
                                    max: 80,
                                    position: 'right',
                                    offset: 80,
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[1]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value} 个'
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '平均项目数',
                                    type: 'bar',
                                    data: {{prolist}}
                                },
                                {
                                    name: '平均案例数',
                                    type: 'bar',
                                    yAxisIndex: 1,
                                    data: {{exlist}}
                                }
                            ]
                        };
                        option && tsChart.setOption(option);
                </script>
            </div>
            <!-- end container -->

            <div class="contaioner2">
                <div id="incomeavg" style="width:1000px;height:600px;left:15%"></div>
                    <script type="text/javascript">
                        var dom = document.getElementById('incomeavg');
                        var tsChart = echarts.init(dom);
                        var option;
                        var colors = ['#EE6666'];
                        option = {
                            color: colors,
                            title: {
                            text: '各类用户的收入统计'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            grid: {
                                right: '20%'
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['用户平均收益']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    data: ['lv0', 'lv1', 'lv2', 'lv3', 'lv4', 'lv5', 'lv6', 'lv7', 'lv8', 'lv9', 'lv10']
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '平均项目数',
                                    min: 0,
                                    max: 600000,
                                    position: 'left',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: colors[0]
                                        }
                                    },
                                    axisLabel: {
                                        formatter: '{value} 元'
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '用户平均收益',
                                    type: 'line',
                                    data: {{incomelist}}
                                }
                            ]
                        };
                        option && tsChart.setOption(option);
                </script>
            </div>
        </section>
        <!-- end features-section-s3 -->

        <!-- start site-footer -->
        <footer class="site-footer">
            <div class="lower-footer bg-footer">
                <div class="container">
                    <div class="row">
                        <div class="separator"></div>
                        <div class="col col-xs-12">
                            <p class="copyright">Green Skin Technology &copy; 2021.Saoming All rights reserved.<a target="_blank" ></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end site-footer -->
    </div>
    <!-- end of page-wrapper -->

</body>

</html>